<template>
  <div>
    <loading-comp v-if="isShow"></loading-comp>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        :style="`background-image:url('${i.img}')`"
        v-for="i in message"
        :key="i.comic_id"
        ><router-link :to="`/detail?id=${i.comic_id}&isLogin=${isLogin}`"
          >'</router-link
        ></van-swipe-item
      >
      <!-- <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item> -->
    </van-swipe>
  </div>
</template>

<script>
import { get } from "@/http/request.js";
import LoadingComp from "@/components/LoadingComp";

export default {
  name: "Slideshow",
  data() {
    return {
      message: [],
      isShow: true,
      isLogin: this.$route.query.isLogin,
    };
  },
  components: {
    LoadingComp,
  },
  methods: {
    async initList() {
      await get(`https://apis.netstart.cn/bcomic/HomeRecommend`).then(
        (data) => {
          if (data && data.code === 0) {
            this.message = data.data.list;
            // console.log(this.message);
          }
        }
      );
      this.isShow = false;
    },
  },
  mounted() {
    this.initList();
  },
};
</script>

<style lang='scss'>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 200px;
  text-align: center;
  // background-color: #39a9ed;
  position: relative;
  background: #39a9ed, no-repeat center;
  background-size: 100%;
  a {
    display: inline-block;
    width: 100%;
    height: 100%;
    color: transparent;
  }
}
</style>